<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }
    .tb {
      border-collapse: collapse;
      width: 100%;
    }
    .tb th {
      background-color: #0094ff;
      color: white;
    }
    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid #000;
      text-align: center;
    }
    .add {
      padding: 5px;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  </style>
  <body>
    <div id="app">
      <!-- 增加 -->
      <div class="add">
        编号：<input type="text" v-model="code" /> 品牌名称：<input
          type="text"
          v-model="productName"
        />
        <br />
        产品图片地址：<input type="text" v-model="imgUrl" /> 价格：<input
          type="text"
          v-model="price"
        />
        <input @click="add" type="button" value="添加" />
      </div>
      <!-- 搜索 -->
      <div class="add">
        品牌名称：<input type="text" placeholder="请输入搜索条件" />
      </div>

      <!-- 表格数量展示 -->
      <div>
        <table class="tb">
          <tr>
            <th>
              <input type="checkbox" />
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <!-- 动态生成tr -->
          <tr v-for="(item,index) in goods" :key="item.id">
            <td><input type="checkbox" /></td>
            <td><img :src="item.imgUrl" height="50" width="50" /></td>
            <td>{{item.code}}</td>
            <td>{{item.productName}}</td>
            <td>{{item.price}}</td>
            <td><button>+</button>{{item.count}}<button>-</button></td>
            <td><button @click="del(index)">删除</button></td>
          </tr>
        </table>
        <div class="add" v-show="goods.length===0" style="text-align: center">
          没有更多数据
        </div>
      </div>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      code: "",
      productName: "",
      imgUrl: "",
      price: "",
      goods: [
        {
          id: 1,
          imgUrl: "https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF",
          code: 1,
          productName: "狗",
          price: 100,
          count: 12,
        },
        {
          id: 2,
          imgUrl: "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
          code: 2,
          productName: "gou2",
          price: 222,
          count: 01,
        },
        {
          id: 3,
          imgUrl:
            "https://t7.baidu.com/it/u=3601447414,1764260638&fm=193&f=GIF",
          code: 3,
          productName: "两只狗",
          price: 321,
          count: 10,
        },
      ],
    },
    methods: {
      add() {
        if (!this.code || !this.price || !this.productName || !this.imgUrl) {
          alert("请将信息填写完整");
          return;
        }
        var obj = {
          imgUrl: this.imgUrl,
          code: this.code,
          price: this.price,
          productName: this.productName,
          count: 1,
          id: Math.random().toString(32).substr(2),
        };
        this.goods.push(obj);
        this.code = "";
        this.price = "";
        this.productName = "";
        this.imgUrl = "";
      },
      del(i) {
        this.goods.splice(i, 1);
      },
    },
  });
</script>
